<script setup lang="ts">
import { ref } from 'vue'
import { type Goods } from '@/types/goods'
import { useRouter } from 'vue-router'
import Category from '@/components/Category.vue'
import { getProductList } from '@/apis/index'
import { onMounted } from "vue";
import ShopMessge from './shopMessge.vue'
const router = useRouter()
const imgHandle = (item: any) => item.split(',').shift()
const populary = ref<Goods>()
const populary_array = ref<Goods[]>()
function backToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  })
}
const goBuy = (item: Goods) => {
  console.log("1111")
  router.push({
    path: 'goodDetail',
    query: {
      id: item.id
    }
  })
  console.log(router)
}
onMounted(() => {
  getList()
})
const getList = () => {
  getProductList().then(res => console.log(res.data)).catch(err => console.log(err))
}
const shopReg = () => {
  router.push('/shopReg')
}
const shopInfo = () => {
  router.push('/shopInfo')
}
const shopMessge = () => {
  router.push('/shopMessge')
}
</script>
<template>
  <div class="container">
    <div class="container_info">
      <div class="category">
        <Category />
      </div>
      <div class="business">
        <div class="index-btn">
          <el-button type="success" @click="shopReg">
            <el-icon>
              <Warning />
            </el-icon>注册店铺</el-button>
        </div>
        <div class="index-btn">
          <el-button type="info" @click="shopInfo"><el-icon>
              <Warning />
            </el-icon>查看店铺页面</el-button>
        </div>
        <div class="index-btn">
          <el-button type="info" @click="shopMessge"><el-icon>
              <Warning />
            </el-icon>查看店铺通知</el-button>
        </div>
      </div>
    </div>
    <div class="product-list">
      <div class="img_box" v-for="(item, index) in 10" :key="index">
        <div class="img_body">
          <div class="img">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" />
          </div>
          <div class="product-name">叫花鸡</div>
          <div class="product-sale"><span class="price">30元</span> <span class="sale-btn"
              @click="goBuy({ id: 1 })">购买</span></div>
          <div class="introduce">
            <div class="introduce-txt">罗氏香喷喷叫花鸡，</div>
            <div class="introduce-txt">真空包装，质量保证。</div>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.container {
  // background-image: url('@/assets/Imgs/BJ1.png');
  display: flex;
  width: 100%;
  margin-top: 20px;
  height: auto;
  padding-bottom: 20px;

  .container_info {
    width: 20%;

    .category {
      height: 400px;
      color: #000;
    }

    .business {
      .index-btn {
        margin-top: 20px
      }
    }
  }

  .product-list {
    margin-left: 20px;
    display: flex;
    align-items: normal;
    width: 75%;
    height: auto;
    flex-wrap: wrap;

    .img_box {
      position: relative;
      display: inline-flex;
      margin: 5px;
      width: 295px;
      height: 450px;
      // border: solid;
      background: #fff;

      .img_body {
        width: 100%;
        height: 100%;

        .img {
          width: 280px;
          height: 280px;
          margin: 10px auto;

          img {
            width: 280px;
            height: 280px;

          }
        }

        .product-name {
          width: 100%;
          height: 40px;
          font-size: 24px;
          line-height: 40px;
          font-weight: bold;
          padding-left: 30px;
        }

        .product-sale {
          width: 280px;
          height: 40px;
          font-size: 16px;
          line-height: 40px;
          margin: 0 auto;
          display: flex;
          justify-content: space-between;
          border: 1px solid #888a8d;
          border-radius: 5px;

          .price {
            padding-left: 15px;
          }

          .sale-btn {
            padding-right: 15px;
            cursor: pointer;
          }
        }

        .introduce {
          font-size: 12px;
          text-align: center;
          color: #5e5b5b;

          .introduce-txt {
            height: 24px;
            line-height: 24px;
          }
        }
      }



    }
  }

}
</style>
